
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.css"/>
</head>
<body>
    <!--<header class="mui-bar mui-bar-nav">
    	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 id="header-title" class="mui-title">音乐列表</h1>
	</header>-->
	<nav class="mui-bar mui-bar-tab">
	    <a data-id="music.html" data-title="内地音乐榜单" class="mui-tab-item mui-active">
	        <span class="mui-icon mui-icon-home"></span>
	        <span class="mui-tab-label">音乐列表</span>
	    </a>
	    <a data-id="news.html" data-title="新闻详情" class="mui-tab-item">
	        <span class="mui-icon mui-icon-phone"></span>
	        <span class="mui-tab-label">新闻列表</span>
	    </a>
	    <a data-id="perCenter.html" data-title="个人中心" class="mui-tab-item">
	        <span class="mui-icon mui-icon-email"></span>
	        <span class="mui-tab-label">个人中心</span>
	    </a>	    
	</nav>
	
    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
	    mui.init();
	    mui.plusReady(function(){
	//    		得到当前页面的 webveiw 对象
	    		var self = plus.webview.currentWebview();
	      		var subpages = ['music.html','news.html','perCenter.html'];
	      		for(var i=0;i<subpages.length;i++){
	      			
	      			var sub = plus.webview.create(subpages[i],subpages[i],{
	      				top: '0px',
	    				bottom: '50px'});
	      			if(i>0){
	//    				plus.webview.hide(subpages[i]);
						sub.hide();						
	      			}
				 	self.append(sub);
	      		}
	      		var activeTab = subpages[0];
	//    		plus.webview.show(activeWebview);
	      		mui('.mui-bar-tab').on('tap','a',function(){
	      				var wid = this.getAttribute('data-id');
//	      				var title = this.getAttribute('data-title');
//	      				document.getElementById('header-title').innerHTML = title;
//	      				mui('#header-title').innerHTML = title;   //这样改变不了
	      				if(wid != activeTab){
	      					plus.webview.show(wid);
	  						activeTab = wid;
	      				}
	      				
	      		})
	      		
      	})
    </script>
</body>
</html>
